<template>
  <div class="zckcgl">
    <header>
        <div class="btn">
            <el-button class="btn2" type="primary" @click="fanhui">返回</el-button>
        </div>
        <h4>仓储订单详情</h4>
        <el-steps :active="2" align-center>
  <el-step title="待确认" description="王力宏 2020-02-02 xx:xx:xx"></el-step>
  <el-step title="待发货" description="这是一段很长很长很长的描述性文字"></el-step>
  <el-step title="已发货" description="这是一段很长很长很长的描述性文字"></el-step>
  <el-step title="已完成" description="这是一段很长很长很长的描述性文字"></el-step>
</el-steps>
    </header>

    <div class="pop2" style="height: 700px">
          <header>
            <p class="p3">订单信息</p>
            <div class="h-cont">
              <div class="hc-left">
                <p>仓储订单号：11111111111</p>
                <p>下单人：XXX</p>
                <p>订单接受人：XXX</p>
              </div>
              <div class="hc-model">
                <p>下单时间：2020-10-10 09:22:00</p>
                <p>下单机构：湖北武汉区仓库</p>
                <p>接受时间：2020-10-10 09:22:00</p>
              </div>
              <div class="hc-right">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="下单备注: " style="margin-top:15px">
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                  </el-form-item>
                </el-form>
              </div>
            </div>

            <p class="p4">订单信息</p>
            <div class="h-cont">
              <div class="hc-left">
                <p>发货人：XXX</p>
              </div>
              <div class="hc-model">
                <p>发货时间：2020-10-10 09:22:00</p>
              </div>
              <div class="hc-right">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="下单备注: " style="margin-top:15px">
                    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                  </el-form-item>
                </el-form>
              </div>
            </div>

            <p class="p5">收货信息</p>
            <div class="h-cont2">
              <div class="hc-left">
                <p>收货人：XXX</p>
              </div>
              <div class="hc-model">
                <p>收货时间：2020-10-10 09:22:00</p>
              </div>
               </div>
          </header>
          <el-table
              :data="tableData3"
              :default-sort="{ prop: 'date', order: 'descending' }"
            >
              <el-table-column label="商品名称" width="500">
                <template slot-scope="scope">
                  
                    <p style="margin: 0">
                      {{ scope.row.item && scope.row.item.bianhao }}
                    </p>
                    <p style="margin: 0 30px 0 0">
                      {{ scope.row.item && scope.row.item.time }}
                    </p>

                  <div style="display: flex">
                    <img
                      style="width: 80px; height: 60px"
                      :src="scope.row.item && scope.row.item.img"
                      alt=""
                    />
                    <div>
                      <p style="line-height: 40px; margin: 15px 0 0 0">
                        {{ scope.row.item && scope.row.item.spbianhao }}
                      </p>
                      <p style="line-height: 40px; margin: 0">
                        {{ scope.row.item && scope.row.item.shop }}
                      </p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="danjia"
                label="商品分类"
                :formatter="formatter"
              >
              </el-table-column>
              <el-table-column prop="date" label="数量" width="180">
              </el-table-column>
            </el-table>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
       tableData3: [
        {
          date: "10",
          name: "湖北区域仓库",
          address: "待确认",
          danjia: 'XXXX/分类1',
          item: {
           
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            spbianhao: "商品编号：1232123412312342",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
        {
          date: "10",
          name: "湖北区域仓库",
          address: "待发货",
          danjia: 'XXXX/分类1',
          item: {
           
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            spbianhao: "商品编号：1232123412312342",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
        {
          date: "10",
          name: "湖北区域仓库",
          address: "已发货",
          danjia: 'XXXX/分类1',
          item: {
           
            img:
              "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            spbianhao: "商品编号：1232123412312342",
            shop: "XXXXXXXxxxxxxx商品…",
          },
        },
  
      
      ],
        }
    },
    methods:{
        fanhui(){
            this.$router.back()
        }
    }
};
</script>

<style lang="scss" scoped>
.zckcgl {
  width: 98%;
  overflow: hidden;
  margin: 1%;
  background-color: #fff;
  header{
      width: 100%;
      overflow: hidden;
      .btn{
          width: 100%;
          height: 40px;
          margin: 20px 40px;
          .btn2{
              width: 100px;
              height: 40px;
          }
      }
      h4{
          width: 100%;
          height: 40px;
          line-height: 40px;
          text-align: center;
      }
  }
    .pop2 {
        
        overflow: hidden;
        padding: 0 6% 0 4%;
    header {
      width: 100%;
      overflow: hidden;
      .p3,.p4,.p5 {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #bbb;
        margin: 0;
      }
      .h-cont,.h-cont2{
        display: flex;
        justify-content: space-between;
      }
      .h-cont2{
        width: 51%;
      }
    }

  }
}
</style>